<template>
  <div class="index-container">
    <div class="sign-title">
      <span class="require">*</span>
      上传带有本人签字的快递单：
    </div>
    <upload :no="no" @uploadimg="uploadimg($event,'post_img')" @deleteimage="deleteimage('post_img')"></upload>

    <div class="sign-title top32">
      <span class="require">*</span>
      上传收到的设备照片：
    </div>
    <upload :no="no" @uploadimg="uploadimg($event,'device_img')" @deleteimage="deleteimage('device_img')"></upload>
    <div class="speedbtn" @click="confirmSign">签收</div>
  </div>
</template>
<script>

import Upload from "./upload";
import { reciept } from "@/api/home.js"
export default {
  components: {Upload},
  data() {
    return {
      no: '',
      post_img:'',
      device_img:''
    }
  },

  mounted() {
    this.no = this.$route.query.no
  },

  methods: {
    confirmSign() {
      if (!this.no) {
        this.$notify({ type: 'danger', message: '工单异常，请重新进入' })
        return
      }
      if (!this.post_img) {
        this.$notify({ type: 'danger', message: '请上传快递单图片' })
        return
      }
      if (!this.device_img) {
        this.$notify({ type: 'danger', message: '请上传设备图片' })
        return
      }
      let params = {
        no: this.no,
        post_img: this.post_img,
        device_img: this.device_img
      }
      reciept(params).then((res) => {
        this.$notify({ type: 'success', message: '签收成功' })
        setTimeout(()=>{
          this.$router.go(-1)
        },1000)
      }).catch((e) => { console.log(e) })
    },
    deleteimage(e) {
      this[e] = ''
    },
    uploadimg(url,e) {
      this[e] = url
    },
  }
}
</script>

<style scpoed>
.speedbtn{
  width: 250px;
  height: 40px;
  background: linear-gradient(135deg, #FF3737, #A82025);
  border-radius: 20px;
  margin: 0 auto;
  margin-top: 50px;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #FEFEFE;
  text-align: center;
  line-height: 40px;
}
.sign-title{
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #000000;
}
.index-container{
  padding: 30px 15px;
}
.require{
  color: #FF3737;
}
</style>
<style lang="scss">
html,body{
  width:100%;
  height:100%;
  background-color: #f4f4f4 ;
}
</style>
